<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="css/reset.css">
		<style type="text/css">
			html{
				width: 100%;
				height: 100%;
				overflow-x: hidden;
			}
			body{
				text-align: left;
				width: 100%;
				background: #e9dfc7;
				overflow: hidden;
			}
			
			.m-read-content {
				font-size: 14px;
				color: #555;			
				padding: 15px;
			}
			.m-read-content h4 {
				font-size: 20px;
				color: #736357;
				border-bottom: solid 1px #736357;
				margin: 0 0 1em 0;
				letter-spacing: 2px;
			}
			
			.m-read-content p {
				text-indent: 2em;
				margin: 0.5em 0;
				text-align: justify;
				letter-spacing: 0px;
				line-height: 24px;
			}
			.u-tab{
				position: relative;
				height: 34px;
				margin: 10px auto;
				line-height: 34px;
				border-radius: 8px;
				border: 1px solid #858382;
				font-size: 13px;
				background: #000;
				opacity: 0.9;
			}
			.u-tab li{
				display: inline-block;
				width: 49%;
				font-size: 14px;
				border-right: 1px solid #858382;
				text-align: center;
				color: #fff;
			}
			.m-button-bar{
				text-align: center;
				padding: 5px;
				margin: 10px;
				max-width: 900px;
				margin: 0 auto;
				width: 70%;
			}
			.top-nav{
				position: fixed;
				top: 0px;
				height: 50px;
				width: 100%;
				background: #000;
				z-index: 10004;
			}
			.top-nav-warp {
				position: relative;
				max-width: 900px;
				margin: 0 auto;
			}
			.icon-back{
				position: absolute;
				top: 14px;
				left: 10px;
				width: 23px;
				height: 23px;
				background: url();
				background-size: contain;	
			}
			
			.nav-title{
				position: absolute;
				top: 16px;
				left: 42px;
				color: #d5d5d6
			}
			
			.bottom-nav-bk {
				position: fixed;
				bottom: 0px;
				height: 70px;
				background: #000;
				width: 100%;
				opacity: 0.9;
				z-index: 10004
			}
			.bottom-nav{
				position: fixed;
				bottom: 0px;
				height: 70px;
				background: none;
				width: 100%;
				opacity: 1;
				z-index: 10004;
				margin: 0 auto;
				text-align: center;
			}
			
			.bottom-nav .item {
				display: inline-block;
				width: 32%;
				color: #fff;
				text-align: center;
				margin: 0 auto;
			}
			
			.icon-menu {
						
				width: 18px;
				height: 13px;
				background: url();
				background-size: contain;
				margin: 10px auto;
			}
			
			.icon-ft {
						
				width: 18px;
				height: 13px;
				background: url();				
				margin: 10px auto;
				background-size: contain;
				
			}
			
			.icon-day {
						
				width: 18px;
				height: 13px;				
				margin: 10px auto;
				background: url();
				background-size: contain;
			}
			
			.icon-night {
     			width: 16px;
				height: 16px;				
				margin: 10px auto;
                background: url();
				background-size: contain;
			}
			
			.top-nav-pannel-bk{
				position: fixed;
				bottom: 70px;
				height: 135px;
				background: #000;
				width: 100%;
				color: #fff;
				opacity: 0.9;
				z-index: 10003
			}

			.top-nav-pannel{
				position: fixed;
				bottom: 70px;
				height: 135px;
				width: 100%;
				background: none;
				z-index: 10004;
				color: #fff;
			}
			.top-nav-pannel button {
				background: none;
				border: 1px #8c8c8c solid;
				padding: 5px 40px;
				color: #fff;
				display: inline-block;
				border-radius: 16px;
			}
			
			.child-mod {
				padding: 5px 10px;
				margin-top: 15px
			}
			.child-mod span {
				display: inline-block;
				padding-right: 20px;
				padding-left: 10px;
			}
			.bk-container{
				position: relative;
				width: 30px;
				height: 30px;
				border-radius: 15px;
				background: #fff;
				display: inline-block;
				vertical-align: -14px;
			}
			.bk-container-current{
				position: absolute;
				width: 32px;
				height: 32px;
				border-radius: 16px;
				border: 1px red solid;
				top: -2px;
				left: -2px;
			}
			.artical-action-mid {
				position: fixed;
				top: 30%;
				height: 40%;
				width: 100%;
				z-index: 10002;
			}
			
		</style>
	</head>
	<body>
		
		<div class="top-nav" id="top-nav" >
			<div class="top-nav-warp">
				<div class="icon-back"></div>
				<div class="nav-title" id="nav_title">
					返回书架
				</div>
			</div>	
		</div>
		
		<div class="bottom-nav-bk bottom_nav" ></div>
		<div class="bottom-nav bottom_nav" >
			<div class="item menu-button" id="menu_button">
					<div class="item-warp">
						<div class="icon-menu"></div>
						<div class="icon-text">
							目录
						</div>
					</div>
			</div>
			
			<div class="item" id="font-button">
					<div class="item-warp">
						<div class="icon-ft"></div>
						<div class="icon-text">
							字体
						</div>
					</div>
			</div>
			
			<div class="item" id="night-button">
					<div class="item-warp" style="display:none" id="day_icon">
						<div class="icon-day"></div>
						<div class="icon-text">
							白天
						</div>
					</div>
					<div class="item-warp" id="night_icon">
						<div class="icon-night"></div>
						<div class="icon-text">
							夜间
						</div>
					</div>
			</div>
			
		</div>	
		
		
		<div class="top-nav-pannel-bk font-container" id="font-container2" ></div>
		<!--控制面板-->
		<div class="top-nav-pannel font-container" id="font-container3" >
				<div class="child-mod">
					<span>字号</span>
					<button id="large-font" class="spe-button" >
						大
					</button>
					<button id="small-font" class="spe-button" style="margin-left:10px;">
						小
					</button>
				</div>
				<div class="child-mod" id="bk-container">
					<span>背景</span>
					<div class="bk-container">
						<div class="bk-container-current">
							
						</div>
					</div>
				</div>
		</div>
		
		<div class="m-artical-action">
				<div class="artical-action-mid" id="action_mid">
					
				</div>
		</div>
		
		
		
		
		<div class="container" id="root">
			<div id="fiction_chapter_title">
				
			</div>
			<div id="font-container" class="m-read-content"> 


			</div>
			
			<div class="m-button-bar" id="bottom_tool_bar">
				<ul class="u-tab" id="bottom_tool_bar_ul">
					<li id="prev_button" >
						上一章
					</li>
					<li id="next_button" style="border-right:none">
						下一章
					</li>
				</ul>
			</div>

			
		</div>
		
		
		<script src="lib/zepto.min.js"></script>
		<script>
			window.jQuery = $;
		</script>
		<script src="js/jquery.base64.js"></script>
		<script src="js/jquery.jsonp.js"></script>
		<script type="text/javascript">
			var container = $('#font-container');
			var initFontSize = 14;
			var Dom ={
				top_nav : $("#top-nav"),
				bottom_nav : $(".bottom_nav"),
				font_container : $(".font-container"),
				font_button :  $("#font-button")
			};
			var Win = $(window);
			
			var Util =(function(){
				var prefix = 'html5_reader_';
				var StorageGetter = function(key){
					return localStorage.getItem(prefix+key);
				};
				var StorageSetter = function(key,value){
					return localStorage.setItem(prefix+key,value);
				}
				var getBsonp = function(url,callback){
					return  $.jsonp({
						url:url,
						cache:true,
						callback:'duokan_fiction_chapter',
						success:function(result){
							var data = $.base64.decode(result);
							var json = decodeURIComponent(escape(data));
							callback&&callback(json);
						}
					});
				}
				return {
					getBsonp:getBsonp,
					StorageGetter:StorageGetter,
					StorageSetter:StorageSetter
				}
			})();
			
			
			function ReaderModel(){
				var Chapter_id;
				var init = function(UIcallback){
					
					getFictionInfo(function(){					
						getCurChapterContent(Chapter_id,function(data){
							
							UIcallback && UIcallback(data);
						});
					});
				};
				
				var getFictionInfo = function (callback){
					$.get('data/chapter.json',function(data){
						Chapter_id = data.chapters[1].chapter_id;
						callback && callback();
					},'json');
				};
				
				var getCurChapterContent = function(chapter_id,callback){
					$.get('data/data'+chapter_id+'.json',function(data){
						if(data.result===0){
							var url = data.jsonp;
							Util.getBsonp(url,function(data){								
								callback && callback(data);
							});
						}
					});
				}
				
				return {
					init:init,
					getFictionInfo:getFictionInfo,
					getCurChapterContent:getCurChapterContent
				}
			}
			
			//处理ui
			function ReaderBaseFrame(){
				function parseChapterData(JsonData){
					var jsonObj = JSON.parse(JsonData);
					var html   = '<h4>'+jsonObj.t+'</h4>';
					for(var i =0;i<jsonObj.p.length;i++){
						html+="<p>"+jsonObj.p[i]+"</p>";
					}
					return html;
				}
				return function(data){
					console.log(1);
					var html=parseChapterData(data);
					container.html(html);
				}
			}
			
			//事件模块
			function EventHanlder(){
				$("#action_mid").click(function(){
					if(Dom.top_nav.css('display')=== 'none'){
						Dom.bottom_nav.show();
						Dom.top_nav.show();
						Dom.font_container.show();
					}else{
						Dom.bottom_nav.hide();
						Dom.top_nav.hide();
						Dom.font_container.hide();
					}
					
				});
				
				Win.scroll(function(){
						Dom.bottom_nav.hide();
						Dom.top_nav.hide();
						Dom.font_container.hide();
				});
				
				//字体
				$("#font-button").click(function(){
					if($("#font-container3").css('display')==='none'){
						$("#font-container3").hide();
						$("#font-container2").hide();
					}else{
						$("#font-container3").show();
						$("#font-container2").show();
					}

				});
			}
			 
			//主函数
			function main(){
				function _init(){
						Dom.bottom_nav.hide();
						Dom.top_nav.hide();
						Dom.font_container.hide();
				}
				_init();
				
				EventHanlder();
				var readerModel = ReaderModel();
				var readUI=ReaderBaseFrame();		
			
				readerModel.init(function(data){
					readUI(data);
				});
			}
			main();
			
//			var test  = ReaderModel();
//			test.getFictionInfo(function (Chapter_id){
//				test.getCurChapterContent(Chapter_id,function(data){
//					
//				});
//			});
		</script>
	</body>
	
</html>